﻿@page "/card/header-card"
@inherits SampleBaseComponent;

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SampleDescription>
    <p>This sample demonstrates the customization of card headers.</p>
</SampleDescription>
<ActionDescription>
    <p>Card Header can be customized for image position and image in the sample</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-lg-3 col-md-3" style="height: 300px">
            <SfCard ID="HugeImage">
                <CardImage Image="images/cards/steven.png" />
                <CardHeader Title="Harrisburg Keith" SubTitle="@CardSubTitle" />
                <CardContent Content="Hi, I'm creative graphic design for print, new media based in Edenbridge" />
                <CardFooter>
                    <CardFooterContent>
                        <SfButton CssClass="e-btn e-outline e-primary">FOLLOW US</SfButton>
                    </CardFooterContent>
                </CardFooter>
            </SfCard>
        </div>
        <div class="col-lg-4 col-md-4 second-container" style="height: 300px">
            <SfCard ID="SecondCard">
                <CardHeader Title="Harrisburg Keith" SubTitle="@CardSubTitle" ImageUrl="images/cards/steven.png" />
                <CardContent Content="Hi, I'm creative graphic design for print, new media based in Edenbridge" />
                <CardFooter>
                    <CardFooterContent>
                        <table>
                            <tr>
                                <td> <div class="e-icons ChatIcon"></div></td>
                                <td> <div class="e-icons StarIcon"></div></td>
                                <td> <div class="e-icons AlarmIcon"></div></td>
                            </tr>
                        </table>
                    </CardFooterContent>
                </CardFooter>
            </SfCard>
            <SfCard ID="Card_Third">
                <CardHeader Title="Harrisburg Keith" SubTitle="@CardSubTitle" ImageUrl="images/cards/steven.png" />
            </SfCard>
        </div>
    </div>
</div>

@code{
    string CardSubTitle = "@harrisburg_keith";
}

<style>
    .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
        padding-top: 0px;
    }

    .e-card .e-card-header .e-card-header-caption .e-card-header-title {
        font-weight: bold;
    }


    .e-card .e-card-content {
        padding-top: 0px;
    }

    #HugeImage {
        text-align: center
    }

        #HugeImage > .e-card-image {
            margin: auto;
            margin-top: 20px;
            width: 64px;
            height: 64px;
            min-height: 64px;
        }

    .second-container .e-card .e-card-header .e-card-header-image {
        height: 48px;
        width: 48px;
    }

    #Card_Third {
        margin-top: 8%;
    }

    .ChatIcon {
        background-image: url("images/cards/chat.png");
        height: 24px;
        width: 24px;
    }

    .AlarmIcon {
        background-image: url("images/cards/alarm.png");
        height: 24px;
        width: 24px;
    }

    .StarIcon {
        background-image: url("images/cards/star.png");
        height: 24px;
        width: 24px;
    }

    .row {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    table {
        width: 60%
    }
</style>